<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="shortcut icon" href="/qingzhu/images/s.ico" type="image/x-icon">
	<link rel="stylesheet" href="/qingzhu/css/reset.css">
	<link rel="stylesheet" href="/qingzhu/css/common.css">
	<link rel="stylesheet" href="/qingzhu/css/userinfo.css">
	<link rel="stylesheet" href="/qingzhu/css/userorders.css">
	<title>个人中心</title>
</head>
<body>
<!-- 顶部栏 -->
<div th:replace="/qingzhu/front/head_and_footer::head"></div>
<!-- 顶部栏结束 -->

<!-- 个人信息 -->
<div class="info-main">
	<div class="other-nav">
		<div class="center-nav">
			<div class="center-nav-title">
				我的订单
			</div>
			<div class="center-nav-body">
<!--				<button class="order-button">待付款</button>-->
<!--				<button class="order-button">待收货</button>-->
<!--				<button class="order-button">待评价</button>-->
<!--				<button class="order-button">退换/售后</button>-->
<!--				<button class="order-button">全部订单</button>-->
				<div class="order-item" th:each="myOrder:${myOrders.list}">
					<span>订单编号：</span>
					<div th:text="${myOrder.orderNo}">(订单编号)</div>
					<div style="display: block"></div>
					<span>订单总价：</span>
					<div style="color: #ff4444" th:text="'￥'+${myOrder.totalPrice}">(订单总价)</div>
					<div style="display: block"></div>
					<span>订单状态：</span>
					<div th:text="${myOrder.orderStatusString}">(订单状态)</div>
				</div>
				<div class="pages">
					<a th:if="${myOrders.currPage} eq 1" href="javascript:void(0)" disabled>&lt</a>
					<a th:if="${myOrders.currPage} ne 1" th:href="'/personal/orders?page='+${myOrders.currPage-1}" href="javascript:void(0)">&lt</a>
					<th:block th:each="pageNum: ${#numbers.sequence(1,myOrders.totalPage)}">
						<a th:if="${pageNum eq myOrders.currPage}" class="tol cur" th:text="${pageNum}"
						   th:href="'/personal/orders?page='+${pageNum}"></a>
						<a th:if="${pageNum ne myOrders.currPage}" class="tol" th:text="${pageNum}"
						   th:href="'/personal/orders?page='+${pageNum}"></a>
					</th:block>
					<!--				<a href="javascript:void(0)" class="tol cur">1</a>-->
					<!--				<a href="javascript:void(0)" class="tol ">2</a>-->
					<a th:if="${myOrders.currPage} eq ${myOrders.totalPage}" href="javascript:void(0)" disabled>&gt</a>
					<a th:if="${myOrders.currPage} ne ${myOrders.totalPage}" th:href="'/personal/orders?page='+${myOrders.currPage+1}" href="javascript:void(0)">&gt</a>
				</div>
			</div>
		</div>
		<div class="right-nav">
			<div class="head">
				<div class="head-pic">
					<img class="head-img" src="/qingzhu/images/img61.png" alt="头像">
				</div>
				<div class="name" th:text="${session.mallUser?.getUserName()}">用户名</div>
			</div>
			<div class="info">
				<div class="point">积分：0</div>
				<div class="expression">经验值：0</div>
				<div class="rank">会员等级：普通会员</div>
			</div>
			<div class="sign-out">
				<button class="sing-out-btn">退出账号</button>
			</div>
		</div>
	</div>
	<div class="left-nav">
		<ul class="left-inner">
			<li class="item-main-first">订单管理</li>
			<li class="item">
				<a th:href="'/personal/orders'" href="javascript:void(0)">我的订单</a>
			</li>
			<li class="item">
				<a href="javascript:void(0)">我的拼团</a>
			</li>
			<li class="item-main">
				账户管理
			</li>
			<li class="item">
				<a href="javascript:void(0)">优惠券(0)</a>
			</li>
			<li class="item">
				<a href="javascript:void(0)">我的收藏</a>
			</li>
			<li class="item">
				<a href="javascript:void(0)">积分</a>
			</li>
			<li class="item-main">
				个人信息
			</li>
			<li class="item">
				<a href="javascript:void(0)">个人资料</a>
			</li>
			<li class="item">
				<a href="javascript:void(0)">安全设置</a>
			</li>
			<li class="item">
				<a href="javascript:void(0)">收货地址</a>
			</li>
			<li class="item-main">
				服务中心
			</li>
			<li class="item">
				<a href="javascript:void(0)">售后管理</a>
			</li>
		</ul>
	</div>
</div>
<!-- 个人信息结束 -->

<!-- footer部分开始 -->
<div th:replace="/qingzhu/front/head_and_footer::footer"></div>

<!-- 返回顶部 -->
<div th:replace="/qingzhu/front/head_and_footer::back_to_top"></div>

<script src="/qingzhu/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#show-all-type").hover(function () {
			$("#all-type").show()
		}, function () {
			$("#all-type").hide()
		});
		$("#all-type").hover(function () {
			$("#all-type").show()
		}, function () {
			$("#all-type").hide()
		})
	})
</script>
</body>
</html>